<template>
    <navigation-bar></navigation-bar>
    <div class="single-classroom">
      <div class="upper-section section">
        <ClassroomInfo class="block" :classroomId="classroomId"/>
        <ClassroomFigure class="block" :classroomId="classroomId"/>
        <ClassroomAdvice class="block" :classroomId="classroomId"/>
      </div>
      <div class="lower-section section">
        <ClassroomCourse class="block" :classroomId="classroomId"/>
        <ClassroomGrade class="block" :classroomId="classroomId"/>
        <ClassroomCompare class="block" :classroomId="classroomId"/>
      </div>
    </div>
  </template>
  
  <script>
  import ClassroomInfo from '../components/classroom/ClassroomInfo.vue';
  import ClassroomFigure from '../components/classroom/ClassroomFigure.vue';
  import ClassroomAdvice from '../components/classroom/ClassroomAdvice.vue';
  import ClassroomCourse from '../components/classroom/ClassroomCourse.vue';
  import ClassroomGrade from '../components/classroom/ClassroomGrade.vue';
  import ClassroomCompare from '../components/classroom/ClassroomCompare.vue';
  import NavigationBar from '@/components/NavigationBar.vue';
  export default {
    name: 'SingleClassroom',
    components: {
      ClassroomInfo,
      ClassroomFigure,
      ClassroomAdvice,
      ClassroomCourse,
      ClassroomGrade,
      ClassroomCompare
    },
    props: {
      classroomId: String,
      courseId: String,
    },
  };
  </script>
  
  <style scoped>
  .single-classroom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  .section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .block {
    flex: 1;
    margin: 0 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .upper-section .block, .lower-section .block {
  
    height: 400px;
  }
  
  </style>